<html>

	<head>
		<meta charset="UTF-8">
		<title>合同列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/bass.css" />
		<style>
			.layui-form {
				width: 35%;
			}
			
			.layui-input {
				width: 100% !important;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<header class="layui-nav" id="headerTop"></header>
			<div class="left_muen" id="left_menu"></div>
			<div class="content_body">

				<!--标题栏-->
				<p class="content_title">合同管理 &nbsp;&nbsp;>&nbsp;&nbsp;合同新增</p>
				<!--标题栏-->

				<form class="layui-form mt20">
					<div class="layui-form-item">
						<label class="layui-form-label">序号</label>
						<div class="layui-input-block">
							<input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入序号" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">合同编号</label>
						<div class="layui-input-block">
							<input type="text" name="contractCode" lay-verify="required" placeholder="请输入合同编号" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">合同名称</label>
						<div class="layui-input-block">
							<input type="text" name="contractName" lay-verify="required" placeholder="请输入合同名称" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">买家</label>
						<div class="layui-input-block">
							<input type="text" name="buyer" lay-verify="required" placeholder="请输入买家" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">合同签订时间</label>
							<div class="layui-input-block">
								<input type="text" name="contractSignDate" id="date" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">卖家</label>
						<div class="layui-input-block">
							<input type="text" name="seller" lay-verify="required" placeholder="请输入卖家" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">合同有效时间</label>
							<div class="layui-input-inline ml10">
								<input type="text" name="contractEffectiveStartDate" id="date1" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline ml10">
								<input type="text" name="contractEffectiveEndDate" id="date2" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
						<label class="layui-form-label">业务类型</label>
						<div class="layui-input-block">
							<select name="businessType" lay-verify="required" lay-search="">
								<option value="">请选择</option>
								<option value="1">长期</option>
								<option value="2">短期</option>
							</select>
						</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
						<label class="layui-form-label">合同类型</label>
						<div class="layui-input-block">
							<select name="contractType" lay-verify="required" lay-search="">
								<option value="">请选择</option>
								<option value="1">NG</option>
								<option value="2">其他</option>
							</select>
						</div>
						<!--</div>-->
					</div>
					<!--<div class="layui-form-item">
						<label class="layui-form-label">计量回路</label>
						<div class="layui-input-block layui-form" lay-filter="selFilter">
							<select name="circuitId" id="circuitId" lay-verify="required" lay-search="">

							</select>
						</div>
					</div>-->
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
						<label class="layui-form-label">计量回路</label>
						<div class="layui-input-block">
							<select name="circuitId" id="circuitId" lay-verify="required" lay-search="">

							</select>
						</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
						<label class="layui-form-label">合同状态</label>
						<div class="layui-input-block">
							<select name="contractStatus" lay-verify="required" lay-search="">
								<option value="">请选择</option>
								<option value="1">待生效</option>
								<option value="2">生效</option>
								<option value="3">作废</option>
							</select>
						</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">描述</label>
						<div class="layui-input-block">
							<textarea name="contractDesc" id="contractDesc" placeholder="请输入描述" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="button" class="layui-btn layui-btn-primary" id="fileUrl">
								<i class="layui-icon">&#xe67c;</i>选择文件
							</button>
							<button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
							<input type="hidden" name="filePath" id="filePath">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<!--预览图片-->
							<div class="layui-upload-list" id="showblock"></div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<div class="layui-btn" lay-submit="" lay-filter="submitFilter">立即提交</div>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../js/common/jquery-1.11.3.min.js"></script>
		<script src="../../layui/layui.js"></script>
		<script src="../../js/common/navList.js"></script>
		<script src="../../js/common/ajax.js"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate', 'upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					upload = layui.upload;
				//合同签订时间
				laydate.render({
					elem: '#date'
				});
				//合同有效时间
				laydate.render({
					elem: '#date1'
				});
				//合同有效时间:
				laydate.render({
					elem: '#date2'
				});

				//初始化计量回路下拉框
				$.ajax({
					url: baseUrl + "/meteringcircuit/getList?pageNo=1",
					type: "GET",
					success: function(data) {
						if(data.code == 200) {
							console.log(data.list);
							var datas = data.list;
							$("#circuitId").empty(); //清空下拉框
							$("#circuitId").append("<option value=''>请选择</option>");
							for(var i = 0; i < datas.length; i++) {
								var item = datas[i];
								console.log(item.id + "---" + item.circuitName);
								$("#circuitId").append("<option value=" + item.id + ">" + item.circuitName + "</option>");
							}
							layui.form.render('select'); //重新渲染select
						} else {
							layer.msg("计量回路加载失败", {
								icon: 5
							});
						}
					}
				});

				//监听提交
				form.on('submit(submitFilter)', function(data) {
					ajaxPost({
						url: '/contract/add',
						data: {
							contractCode: data.field.contractCode, //合同编号
							contractName: data.field.contractName, //合同名称
							buyer: data.field.buyer, //买方
							seller: data.field.seller, //卖方
							contractSignDate: data.field.contractSignDate, //合同签订日期
							contractEffectiveStartDate: data.field.contractEffectiveStartDate, //有效开始日期
							contractEffectiveEndDate: data.field.contractEffectiveEndDate, //有效结束日期
							businessType: data.field.businessType, //业务类型
							contractType: data.field.contractType, //合同类型
							contractDesc: data.field.contractDesc, //描述
							contractStatus: data.field.contractStatus, //合同状态
							circuitId: data.field.circuitId, //合同状态
							filePath: data.field.filePath, //文件路径集合
						},
						successFull: function(res) {
							console.log(res)
							layer.msg('添加成功', {
								icon: 6
							});
							window.location.href = "./contractList.html?pos=3&childPos=0";
						},
						errCallBack: function(res) {
							layer.msg(res.msg, {
								icon: 6
							});
						}
					})
				});

				//执行实例
				var filePath = [];
				var uploadInst = upload.render({
					elem: "#fileUrl", //绑定元素
					url: baseUrl + "/contract/upload", //上传接口
					field: "file", //设定文件域的字段名
					accept: "file", //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
					auto: false,
					bindAction: '#uploadBtn',
					multiple: true,
					choose: function(obj) { //文件上传前的回调
						console.log(obj);
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#showblock').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:100px;height:100px;border: 1px solid #d0caca;margin: 5px;"  >')
						});
					},
					done: function(res) {
						//上传完毕回调
						console.log(res);
						if(res.code == 200) {
							filePath.push(res.msg);
						}
						console.log(filePath);
						$("#filePath").val(filePath);
						layer.msg('上传成功', {
							icon: 6
						});
					},
					error: function(res) {
						//请求异常回调
						console.log(res);
					}
				});

			});
		</script>
	</body>

</html>